import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ruida_bottom_demo/app/components/bottomAppBar/tab_clipper.dart';
import 'package:ruida_bottom_demo/app/components/bottomAppBar/tab_icons.dart';
import 'package:ruida_bottom_demo/app/models/TabIconData.dart';

class BottomAppBar2 extends StatefulWidget {
  const BottomAppBar2(
      {super.key, required this.changeIndex, required this.tabIconList});

  final Function(int index) changeIndex;
  final List<TabIconData> tabIconList;

  @override
  State<BottomAppBar2> createState() => _BottomAppBar2State();
}

class _BottomAppBar2State extends State<BottomAppBar2>
    with TickerProviderStateMixin {
  late AnimationController animationController;

  /// 初始化选中的icon  1,2,3,4
  int selectIcon = 0;
  int selectIconAfter = 0;

  // [easeInOutBack] https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_back.mp4
  final myCurve = const Cubic(0.68, 0, 0, 1.3);

  @override
  void initState() {
    animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 600));

    animationController.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
        if (!mounted) return;
        selectIcon = selectIconAfter;
      }
    });

    animationController.animateTo(1.0, duration: Duration.zero);
    WidgetsBinding.instance!.addPostFrameCallback((_) => getInitState());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget? child) {
        return PhysicalShape(
          clipper: TabClipper(
              radius: 26.0,
              padding: const EdgeInsets.only(left: 10, right: 10),
              position: Tween<double>(
                      begin: selectIcon.toDouble(),
                      end: selectIconAfter.toDouble())
                  .animate(CurvedAnimation(
                      parent: animationController, curve: myCurve))
                  .value),
          color: Colors.white,
          elevation: 26.0,
          child: child,
        );
      },
      child: Column(
        children: [
          SizedBox(
            height: 62,
            child: Padding(
              padding: const EdgeInsets.only(left: 8, right: 8),
              child: Row(
                children: <Widget>[
                  Expanded(
                      child: TabIcons(
                    tabIconData: widget.tabIconList[0],
                    removeAllSelect: () {},
                    onSelect: () {
                      widget.changeIndex(0);
                      setAnimation(0);
                    },
                  )),
                  Expanded(
                      child: TabIcons(
                    tabIconData: widget.tabIconList[1],
                    removeAllSelect: () {},
                    onSelect: () {
                      widget.changeIndex(1);
                      setAnimation(1);
                    },
                  )),
                  Expanded(
                      child: TabIcons(
                    tabIconData: widget.tabIconList[2],
                    removeAllSelect: () {},
                    onSelect: () {
                      widget.changeIndex(2);
                      setAnimation(2);
                    },
                  )),
                  Expanded(
                      child: TabIcons(
                    tabIconData: widget.tabIconList[3],
                    removeAllSelect: () {},
                    onSelect: () {
                      widget.changeIndex(3);
                      setAnimation(3);
                    },
                  )),
                ],
              ),
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).padding.bottom / 1.6,
          )
        ],
      ),
    );
  }

  Future<bool> getInitState() async {
    widget.tabIconList[selectIcon].animationController?.forward();
    widget.tabIconList[selectIcon].iconAnimationController?.forward();
    return true;
  }

  @override
  void dispose() {
    animationController.dispose();
    for (var tab in widget.tabIconList) {
      tab.animationController?.dispose();
      tab.iconAnimationController?.dispose();
    }
    super.dispose();
  }

  void setAnimation(int index) {
    /// 振动
    HapticFeedback.mediumImpact();

    /// 之前选中的icon 执行缩小动画
    widget.tabIconList[selectIcon].iconAnimationController?.reverse();
    selectIconAfter = index;

    /// 指示器移动动画
    animationController.reset();
    animationController.forward();
    if (!mounted) return;
    setState(() {
      widget.tabIconList.forEach((TabIconData tab) {
        tab.isSelected = false;
        if (widget.tabIconList[index].index == tab.index) {
          tab.isSelected = true;
        }
      });
    });
  }
}
